<template>
  <div id="app">
    <div class="box_input">
      <!-- <img class="back_icon" /> -->
      <input class="searchInput" ref="searchInput" v-model="inputVal" />
      <div class="cancel">取消</div>
    </div>

    <div class="history_box">
      <div class="history_title">搜索历史</div>
      <div class="dismiss" @click="showPopupwindows=true">清空</div>
    </div>

    <div class="tab_box">
        <div class="tab_item" v-for="(tabItem,indexlimt) in searchData" :key="indexlimt"  @click="tabSwitch(indexlimt,tabItem.moduleId,tabItem.showMax,tabItem,1)">
          <img class="tab_item_image" :src="tabItem.iconUrl" />
          <div class="item_title">{{tabItem.name}}</div>
        </div>
      </div>

    <div class="tab_content" v-for="(item,index) in showData" :key="index">
      <div class="title" v-if="item.item.length==0?false:true" >{{item.name}}</div>
      <div class="tab_box">
        <div class="tab_item" v-for="(tabItem,indexlimt) in item.item" :key="indexlimt"  @click="tabSwitch(indexlimt,tabItem.moduleId,index+1,tabItem,2)">
          <img class="tab_item_image" :src="tabItem.iconUrl" />
          <div class="item_title">{{tabItem.name}}</div>
        </div>
      </div>
    </div>


  
    <div class="popupwindows" v-if="showPopupwindows">
       <div class="clearView">
          <div class="clearTitle">确定清空?</div>
          <div class="handlerView">
             <div class="canceler" @click="showPopupwindows=false">取消</div>
             <div class="clear" @click="clearButtom()">确认</div>
          </div>
       </div>
    </div>


  </div>
</template>

<script>
export default {
  name: 'searchView',
  data() {
    return {
      tabData: [{
          name: '业绩为王',
          item: []
        },
        { name: '形象之星', item: [] },
        { name: '江南加油站', item: [] }],
      showData:[],
      searchData:[],
      inputVal: '',
      timeout: null,
      showPopupwindows:false
    }
  },

  watch: {
    inputVal(curVal, oldVal) {
      let that = this
      clearTimeout(that.timeout)
      that.timeout = setTimeout(() => {
        that.searchFit(curVal)
      }, 300)
    }
  },

  mounted() {
    this.homeInfo()
    this.getData()
  },
  computed: {
  },
  created: function() {
    // document.title = '员工福利'
  },
  methods: {

    searchFit(curVal){
        console.log(curVal)
        console.log("xxxxxxxxx")
        let dataCopy = this.tabData
        let showDataC = [{
          name: '业绩为王',
          item: []
        },
        { name: '形象之星', item: [] },
        { name: '江南加油站', item: [] }]

        if(!curVal){
          this.showData = showDataC
          this.getData()
          return;
        }

        for(let i=0;i<dataCopy.length;i++){

         for(let j=0;j<dataCopy[i].item.length;j++){

           if(dataCopy[i].item[j].name.indexOf(curVal) != -1){
               showDataC[i].item.push(dataCopy[i].item[j])

              //  console.log(showDataC)

           }

         }

        }
        this.showData = showDataC
        console.log(this.showData)
    },

    setData(itemClick){
        let searchData = JSON.parse(localStorage.getItem("insuranceCode"));
        if(!searchData){
          searchData = []
        }
        for(let i=0;i<searchData.length;i++){
          if(itemClick.name == searchData[i].name){
            return;
          }
        }

      searchData.push(itemClick)
      console.log(searchData)
      localStorage.setItem("insuranceCode",JSON.stringify(searchData));

    },

    getData(){
       let searchDatas = JSON.parse(localStorage.getItem("insuranceCode"));
       this.searchData = searchDatas
    },

    clearButtom(){
      localStorage.removeItem("insuranceCode");
       this.showPopupwindows = false;
       this.getData()
    },

    tabSwitch(indexlimit, id, tag,tabItem,tips) {
      console.log(indexlimit, id, tag)
      let path = ''
      switch (tag) {
        case 1:
          path = 'performanceTop'
          break
        case 2:
          path = 'visualStar'
          break
        case 3:
          path = 'jnbyMessage'
          break
        case 4:
          path = 'starLight'
          break
        case 5:
          path = 'shareInfo'
          break
      }
      if(tips==2){
      tabItem.showMax = tag
      this.setData(tabItem)
      }
      if (tag == 5) this.$router.push({ path: 'detailsView', query: { cid: indexlimit } })
      else this.$router.push({ path: path, query: { index: indexlimit, tid: id } })
    },

    homeInfo() {
      const that = this
      this.$http({
        url: 'https://testbzhz.jnbygroup.com/api/gateway/dealer-center/dealer/homeInfo',
        method: 'get'
      }).then(data => {
        if (data.code == 200) {
          let tabDataCopy = that.tabData
          tabDataCopy[0].item = data.data.kingOfPerformance
          tabDataCopy[1].item = data.data.imageStar
          tabDataCopy[2].item = data.data.jiangnanGasStation
          that.tabData = tabDataCopy
          that.starData = data.data.starSharing
        } else {
          this.$toast(data.msg)
        }
      })
    }

  }
}
</script>
<style scoped>
#app {
  height: 100vh;
}

.box_input {
  width: 100%;
  display: flex;
  align-items: center;
}

.back_icon {
  width: 40px;
  height: 40px;
}

.searchInput {
  margin-left: 4%;
  margin-right: 10px;
  flex: 1;
  height: 32px;
  border-radius: 5px;
  border: 1px solid #cdcdcd;
  padding-left: 15px;
}

.cancel {
  font-size: 14px;
  font-weight: 400;
  color: #333333;
  margin-right: 15px;
}

tab_content {
  width: 100%;
}

.tab_content .title {
  margin-top: 10px;
  line-height: 34px;
  margin-left: 4%;
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #424959;
}

.tab_box {
  display: flex;
  align-items: center;
  width: 92%;
  margin-left: 4%;
  margin-top: 5px;
  overflow: auto;
  flex-wrap: wrap;
}

.tab_item {
  width: 23vw;
  height: 68px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.tab_item_image {
  width: 20px;
  height: 20px;
}

.item_title {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 500;
  color: #424959;
}

.history_box {
  width: 100%;
  display: flex;
  align-items: center;
  margin-top: 20px;
}

.history_title {
  margin-left: 4%;
  font-size: 15px;
  font-weight: 500;
  flex: 1;
  color: #434a3e;
}

.dismiss {
  margin-right: 4%;
  font-size: 15px;
  font-weight: 500;
  color: #b4b8b2;
}

.popupwindows{
  width:100vw;
  height:100vh;
    position: fixed;
 top:0px;
 left:0px;
background: rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 11;

}

.clearView{
    /* margin-left: 4%; */
width: 92%;
height: 182px;
background: #FFFFFF;
border-radius: 8px;
}

.clearTitle{
  width:92%;
  height:110px;
  line-height:110px;
  font-size: 16px;
font-weight: 500;
color: #333333;
  text-align: center;
margin-top:20px;

}

.handlerView{
  display: flex;
  align-items: center;
  width:92%;
  margin-left:4%;
    justify-content: space-between;
}

.canceler{
     width: 45%;
height: 40px;
background: #FFFFFF;
border-radius: 5px;
border: 1px solid #327542;
  text-align: center;
font-size: 14px;
font-weight: 500;
color: #327542;
line-height:40px;
}

.clear{
     width: 45%;
border: 1px solid #327542;
height: 40px;
background: #327542;
border-radius: 5px;
text-align: center;
font-size: 14px;
font-weight: 500;
color: #FFFFFF;
line-height:40px;
}

    /* <div class="popupwindows">
      <div class="maskView"></div>
       <div class="clearView">
          <div class="clearTitle">确定清空?</div>
          <div class="handlerView">
             <div class="cancel">取消</div>
             <div class="clear">确认</div>
          </div>
       </div>
    </div> */



/* <div class="histoty_box">
      <div class="history_title">搜索历史<div>
      <div class="dismiss" >清空</div>
    </div> */

/* <div id="app">
    <div class="box_input">
      <img class="back_icon" />
      <input class="searchInput" />
      <div class="cancel">取消</div>
    </div>

    <div class="tab_content" v-for="(item,index) in tabData" :key="index">
      <div class="title">业绩为王</div>
      <div class="tab_box">
        <div class="tab_item" v-for="(tabItem,indexlimt) in item.item" :key="indexlimt">
          <img class="tab_item_image" />
          <div class="item_title">明星榜</div>
        </div>
      </div>
    </div>
  </div> */
</style>